<template>
  <div class="PieChart">
    <div v-if="chartData && chartData.length" class="chart-box">
      <div class="bg-border">
        <p>经营范围</p>
        <span>5426</span>
      </div>
      <div class="chart" ref="chartRef"></div>
    </div>
    <div v-else class="s-empty">
      <img src="@/assets/images/noData.png" />
    </div>
  </div>
</template>
<script setup lang="ts" name="gradeChart">
import { onMounted, defineProps, watch, nextTick, ref, onUnmounted } from "vue";
import { nowSize } from "@/utils/utils";
import * as echarts from "echarts";
const props = defineProps({
  chartData: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: "",
  },
  color: {
    type: Array,
    default: () => ["#31bef3", "#f56b6b", "#235aff", "#ffeb69", "#3fffaa"],
  },
});
const chartRef: any = ref(null);
let myChart: any;

// 初始化echarts图表
const initChart = () => {
  if (!myChart) {
    myChart = echarts.init(chartRef.value);
  }
  let option: any = {
    tooltip: {
      trigger: "item",
      borderWidth: nowSize(2), // 设置边框宽度
      textStyle: {
        fontSize: nowSize(32),
      },
    },
    grid: {
      left: nowSize(20),
      top: nowSize(230),
      containLabel: true,
    },
    legend: {
      top: "bottom",
      left: "5%",
      icon: "rect",
      itemGap: nowSize(20),
      itemWidth: nowSize(40), // 设置图例标记的宽度为正方形
      itemHeight: nowSize(12), // 设置图例标记的高度为正方形
      textStyle: {
        padding: [0, nowSize(5), 0, nowSize(5)],
        rich: {
          name: {
            fontSize: nowSize(36), // 可以根据需要调整大小
            color: "#ffffff",
          },
          value: {
            color: "#00FFFF",
            fontSize: nowSize(36),
            padding: [0, nowSize(40)], // 添加右边距以分隔名称和数值
          },
        },
      },
      formatter: function (name: any) {
        let item: any = props.chartData.find(function (d: any) {
          return d.name === name;
        });
        return `{name|${item.name}}{value|${item.value} 个}`;
      },
    },
    color: props.color,
    label: {
      show: false,
      position: "center",
    },
    series: [
      {
        name: props.title,
        type: "pie",
        radius: ["40%", "53%"],
        center: ["50%", "37%"],
        label: {
          show: false,
          position: "top",
        },
        data: props.chartData,
      },
    ],
  };
  option && myChart.setOption(option, true);
};
// 判断是否有数据，有数据渲染echart图
const handleResize = async () => {
  if (myChart) {
    console.log("监听监听");
    myChart.resize();
  }
};

/**/
watch(
  () => props.chartData,
  async () => {
    if (props.chartData && props.chartData.length) {
      await nextTick();
      initChart();
    }
  },
  { immediate: true },
);
onMounted(() => {
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  myChart && myChart.dispose();
  window.removeEventListener("resize", handleResize);
});
</script>
<style lang="less" scoped>
.PieChart {
  width: 100%;
  height: 100%;

  .s-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 513px;
      height: 377px;
    }
  }
  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(@/assets/images/pieChart_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .chart {
      width: 100%;
      height: 100%;
      background-image: url(@/assets/images/pieee.png);
      background-size: 60% 74.5%;
      background-repeat: no-repeat;
      background-position: 49% 0px;
      position: relative;
      z-index: 1;
    }

    .bg-border {
      position: absolute;
      left: 50%;
      top: 37%;
      transform: translate(-50%, -50%);
      width: 266px;
      height: 266px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: var(--font_size_title);
      line-height: 49px;
      font-family: MicrosoftYaHei;
      color: #ffffff;
      background:rgb(8, 33, 58);
      z-index: 2;
      border-radius: 50%;
      //
      span {
        display: inline-block;
        width: 140px;
        text-align: center;
        position: relative;
        color: rgba(85, 255, 255, 0.99);
        background: #0c335a;
      }
    }

    .num {
      display: inline-block;
      color: #f89929;
      margin-top: 25px;
    }
    .chart-box {
      width: 100%;
      height: 100%;
      background-image: url(@/assets/images/pieChart_bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;

      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
